<template>
  <div class="dialog-form">
    <el-form ref="blackForm" :model="form" :rules="rules" label-width="86px" @submit.prevent="handleSubmit">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号" @input="getUserList" :maxlength="11" />
      </el-form-item>
      <el-form-item v-if="userList">
        <el-table ref="table" border :data="userList" @selection-change="handleSelectionChange" empty-text="暂无用户">
          <el-table-column type="selection" width="55" align="center" :selectable="handleSelect" />
          <el-table-column label="用户编号" align="center" prop="platformUserId" min-width="150" show-overflow-tooltip />
          <el-table-column label="来源渠道" align="center" prop="channelName" width="150" show-overflow-tooltip />
          <el-table-column label="用户名" align="center" prop="userName" min-width="120" show-overflow-tooltip />
          <!-- <el-table-column label="电子卡号" align="center" prop="cardNo" show-overflow-tooltip />
          <el-table-column label="用户状态" align="center" prop="status" min-width="100">
            <template #default="scope">
              <dict-tag :options="plat_user_status" :value="scope.row.status"/>
            </template>
          </el-table-column> -->
        </el-table>
      </el-form-item>
      <el-form-item label="加白原因" prop="remark">
        <el-input v-model="form.remark" type="textarea" :maxlength="100" show-word-limit placeholder="请输入加白原因" />
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getUserListByPhone, addPlatUserWhiteList, updatePlatUserWhiteList } from "@/api/user/whiteList"
import { listPlatuserinfo } from "@/api/user/list"
import { validPhone } from '@/utils/validate'
const emits = defineEmits(['cancel', 'confirm'])

const { proxy } = getCurrentInstance()
const { plat_user_status } = proxy.useDict('plat_user_status')

const table = ref()
const blackForm = ref()
const form = ref({
  mobile: null,
  remark: null
})
const rules = {
  mobile: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { pattern: /^1[3456789]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }
  ],
  remark: [
    { required: true, message: "加白原因不能为空", trigger: "blur" }
  ]
}
const userList = ref()
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const selected = ref([])

const pageInit = (id) => {
  
}

const handleSelect = (row, index) => {
  return row.userWhiteState != 2
}

const handleSubmit = () => {

}

// 多选框选中数据
const handleSelectionChange = (selection) => {
  selected.value = selection
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

const getUserList = () => {
  if (form.value.mobile && form.value.mobile.length == 11 && validPhone(form.value.mobile)) {
    getUserListByPhone(form.value.mobile).then(res => {
      userList.value = res.data || []
      nextTick(() => {
        res.data.forEach(row => {
          if (row.userWhiteState == 2) {
            table.value.toggleRowSelection(row)
          }
        })
      })
    })
  } else {
    userList.value = null
    selected.value = []
    ids.value = []
  }
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  blackForm.value.validate(valid => {
    if (valid) {
      if (!ids.value.length) {
        proxy.$modal.msgWarning("请选择要加白的用户")
      } else {
        selected.value.forEach(obj => {
          obj.remark = form.value.remark
        })
        if (selected.value.length == 1 && selected.value[0].userWhiteState == 2) {
          proxy.$modal.msgWarning("您已添加过该用户")
          onCancel()
        } else {
          addPlatUserWhiteList(selected.value).then(res => {
            if (res.code == 200) {
              proxy.$modal.msgSuccess("添加成功")
              emits('confirm')
            }
          })
        }
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>